<template>
    <div class="add-row-dialog">
        <label class="add-row-row">
            <input type="radio" value="row-fluid" v-model="value" /> 
            <div class="row-box row-fluid">
                <div class="item">全屏</div>
            </div>
        </label>
        <label class="add-row-row">
            <input type="radio" value="row-1" v-model="value" />
            <div class="row-box row-1">
            <div class="item">
                
            </div>
            </div>
        </label>

        <label class="add-row-row">
            <input type="radio" value="row-2" v-model="value" /> 
            <div class="row-box row-2">
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </label>

        <label class="add-row-row">
            <input type="radio" value="row-3" v-model="value" />
            <div class="row-box row-3">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            </div>
        </label>
    </div>
</template>

<script>
export default{
    dialog:{
        title:'添加行',
        width:400,
        okButton:'添加'
    },
    data(){
        return {
            value:'row-1'
        }
    },
    methods:{
        dialogOk(){
            this.dialog.callback(this.value);
            return true;
        }
    },
}
</script>

<style>
.add-row-dialog .add-row-row{
    display: flex;
    margin-bottom: 10px;
}


.add-row-dialog .add-row-row .row-box{
    width: 300px;
    display: grid;
    gap: 10px;
    margin-left: 10px;
}
.add-row-dialog .add-row-row .row-fluid{
    grid-template-columns: 1fr;
}

.add-row-dialog .add-row-row .row-1{
    grid-template-columns: 1fr;
    padding-left: 10px;
    padding-right: 10px;
}

.add-row-dialog .add-row-row .row-2{
    grid-template-columns: 1fr 1fr;
    padding-left: 10px;
    padding-right: 10px;
}

.add-row-dialog .add-row-row .row-3{
    grid-template-columns: 1fr 1fr 1fr;
    padding-left: 10px;
    padding-right: 10px;
}
.add-row-dialog .add-row-row .item{
    text-align: center;
    height: 30px;
    border: 2px solid var(--bs-gray-400);
    background-color:  var(--bs-gray-300);
}
</style>